<!DOCTYPE html>
<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Demo Page for jQuery UI selectmenu</title>
	
	<link type="text/css" href="../../themes/base/jquery.ui.core.css" rel="stylesheet" />
	<link type="text/css" href="../../themes/base/jquery.ui.theme.css" rel="stylesheet" />
	<link type="text/css" href="../../themes/base/jquery.ui.selectmenu.css" rel="stylesheet" />
	<script type="text/javascript" src="../../jquery-1.8.2.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
	
	<script type="text/javascript" src="../../ui/jquery.ui.selectmenu.js"></script>

	<style type="text/css">
		/* demo styles */
		body {font-size: 62.5%; font-family:"Verdana",sans-serif; }
		fieldset { border:0; }	
		label,select,.ui-select-menu { float: left; margin-right: 10px; }
		select { width: 200px; }		
	</style>
	<script type="text/javascript">	
		$(function(){			
			var speedA = $('select#speedA').selectmenu();
			
			$("#index").click(function(event){
				console.log($('select#speedA').selectmenu("index"));
			});
			$("#indexNumber").click(function(event){
				console.log($('select#speedA').selectmenu("index", 4));
			});
			$("#value").click(function(event){
				console.log($('select#speedA').selectmenu("value"));
			});
			$("#valueString").click(function(event){
				console.log($('select#speedA').selectmenu("value", "Medium"));
			});
			$("#valueNumber").click(function(event){
				console.log($('select#speedA').selectmenu("value", 4));
			});
			$("#valueNumberAsString").click(function(event){
				console.log($('select#speedA').selectmenu("value", "11"));
			});
			$("#valueNonExisting").click(function(event){
				console.log($('select#speedA').selectmenu("value", "test123"));
			});
		});	
	</script>
</head>
<body>
	<br />
	<br />
	<form action="#">
		<a href="#nogo" id="index">method index without paramaters (get index)</a><br />
		<a href="#nogo" id="indexNumber">method index with  paramater '4' (set index by number)</a><br />
		<a href="#nogo" id="value">method value without paramaters (get value)</a><br />
		<a href="#nogo" id="valueString">method value with  paramater 'Medium' (set value by string)</a><br />
		<a href="#nogo" id="valueNumber">method value with  paramater '4' (passed as number)</a><br />
		<a href="#nogo" id="valueNumberAsString">method value with  paramater '11' (passed as string)</a><br />
		<a href="#nogo" id="valueNonExisting">method value with  paramater 'test123' (not existing value)</a>
		<br />
		<h2>"default popup" Style</h2>
		<fieldset>
			<label for="speedA">Select a Speed:</label>
			<select name="speedA" id="speedA">
				<option value="Slower">Slower</option>
				<option value="Slow" selected="selected">Slow</option>
				<option value="Medium">Medium</option>
				<option value="Fast">Fast</option>
				<option value="Faster">Faster</option>
				<option value="11">Up to eleven</option>
			</select>
		</fieldset>
	</form>
</body>
</html>